<script setup lang="ts">
/*
 * @description:
 * @fileName: ScaleBox.vue
 * @params
 * @author: lxx
 * @date: 2024-05-21 21:03:55"
 * @version: V1.0.0
 */
// 缩放比例
let scale = ref(1)

// 计算属性修改元素缩放比例
let style = computed(() => {
    const obj = {
        transform: `scale(${scale.value}) translate(-50%, -50%)`
    }
    return obj
})
onMounted(() => {
    // 挂载完成触发一次
    currentScreen()
    // 监视浏览器视口变化
    window.addEventListener('resize', currentScreen)
})

// 浏览器改变触发
const currentScreen = () => {
    // 获取到缩放比，设置它
    scale.value = getScale()
}

const getScale = () => {
    // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
    const ww = window.innerWidth / 1920
    const wh = window.innerHeight / 1080
    return ww < wh ? ww : wh
}

onUnmounted(() => {
    // 移除监视视口变化
    window.removeEventListener('resize', currentScreen)
})
</script>
<template>
    <div class="content" :style="style">
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
.content {
    width: 1920px;
    overflow: hidden;
    height: 1080px;
    padding: 0 30px 20px;
    box-sizing: border-box;
    background-color: #0a182b;
    transform-origin: 0 0;
    position: fixed;
    left: 50%;
    top: 50%;
}
</style>
